<template>
  <div class="box detail">
    <div class="header1">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        @click-right.stop="onClickRight">
        <template #right>
          <van-icon name="ellipsis" size="30" color="white" />
          <ul v-show="show" class="rightList">
            <li @click="$router.push('/home')">首页</li>
            <li @click="$router.push('/kind')">分类</li>
            <li @click="$router.push('/cart')">购物车</li>
            <li @click="$router.push('/my')">我的</li>
            <li @click="showShare=true">分享</li>
          </ul>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="30" color="white" />
        </template>
      </van-nav-bar>
    </div>
    <div class="header">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        @click-right.stop="onClickRight">
        <template #left>
          <van-icon name="arrow-left" size="30" color="gray" />
        </template>
        <template #right>
          <van-icon name="ellipsis" size="30" color="gray" />
        </template>
        <template #title>
          <ul class="loucen">
            <li :class="top<=10 ? 'headerActive' : ''">商品</li>
            <li :class="top>20&&top<50 ? 'headerActive' : ''">评价</li>
            <li :class="top>=50&&top<100 ? 'headerActive' : ''">详情</li>
            <li :class="top>=100 ? 'headerActive' : ''">推荐</li>
          </ul>
        </template>
      </van-nav-bar>
    </div>
    <div class="proCont">
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
      <van-swipe class="my-swipe" indicator-color="white" ref="img">
        <van-swipe-item v-for="(val,idx) in proImg" :key="idx" @click="proview(idx)" >
          <van-image width="100%" :src="val" fit="cover" />
        </van-swipe-item>
      </van-swipe>
      <van-cell-group>
        <van-cell>
          <template #title>
            <div class="priceHeader">
              <div>
                <span style="font-size:16px;color:red;">￥<span style="font-size:30px">{{price}}</span>.00</span>
                <del style="font-size:12px;color: #b5b5b5;">￥{{parseInt(price*1.1)}}</del>
              </div>
              <div class="pdc">
                <div class="priceDown">
                  <van-icon name="balance-o" />
                  <span class="priceDownT">降价提醒</span>
                </div>
                <div class="collect" @click="addCollectFl">
                  <van-icon :name="isStar?'like':'like-o'" />
                  <span class="collectT">{{isStar?'已收藏':'收藏'}}</span>
                </div>
              </div>
            </div>
          </template>
          <template #label>
            <p class="proIntro">{{introduce}}</p>
            <p>假一罚十</p>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="fangXin" @click="showFangXin = true">
        <div class="fangXinL">
          <i></i>
          <span>极速审核 · 30天价保 · 免费上门取退</span>
        </div>
        <span class="fangXinR">...</span>
      </div>
      <div class="tanchuang">
        <van-action-sheet v-model="showFangXin" cancel-text="确定" close-on-click-action title="放心购">
          <div class="fangXinCon">
            <ul>
              <li>
                <h3>极速审核</h3>
                <p>极速审核指商家为用户提供的针对售后退换货流程的专项服务，开通后售后服务单会在24H内审核完毕；</p>
              </li>
              <li>
                <h3>30天价保</h3>
                <p>此商品支持30天价保，下单30天内前台京东价发生降价可以申请价格保护。</p>
              </li>
              <li>
                <h3>免费上门取退</h3>
                <p>京东快递免费上门取退，取退后闪电退款</p>
              </li>
            </ul>
          </div>
        </van-action-sheet>
        <van-action-sheet v-model="showYouhui" cancel-text="确定" close-on-click-action title="优惠">
          <div class="fangXinCon">
            <van-cell-group>
              <van-cell>
                <template #title>
                  “促销”
                  <br>
                  “跨店铺满减”、“满减”仅可任选其一，可在购物车更改
                </template>
              </van-cell>
              <van-cell>
                <template #title>
                  <van-tag type="danger" plain>跨店铺满减</van-tag>
                  <span>每满300元，可减40元现金</span>
                </template>
                <template #default>
                  <van-icon name="arrow" />
                </template>
              </van-cell>
              <van-cell>
                <template #title>
                  <van-tag type="danger" plain>满减</van-tag>
                  <span>每满99元，可减10元现金</span>
                </template>
                <template #default>
                  <van-icon name="arrow" />
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </van-action-sheet>
        <van-action-sheet v-model="showBaitiao" cancel-text="确定" close-on-click-action title="打白条分期购买">
          <div class="fangXinCon">
              <van-cell>
                  分期服务（使用前的分期情况）
              </van-cell>
              <van-cell-group>
                  <ul class="baitiao">
                    <li>
                      <p>不分期</p>
                      <p>先用后付</p>
                    </li>
                    <li>
                      <p>3期 x 85.12元</p>
                      <p>含服务费，每期2.12元，费率0.85%</p>
                    </li>
                    <li>
                      <p>6期 x 43.62元</p>
                      <p>含服务费，每期2.12元，费率0.85%</p>
                    </li>
                    <li>
                      <p>12期 x 23.24元</p>
                      <p>含服务费，每期2.49元，费率1%</p>
                    </li>
                    <li>
                      <p>24期 x 12.75元</p>
                      <p>含服务费，每期2.49元，费率1%</p>
                    </li>
                  </ul>
              </van-cell-group>
          </div>
        </van-action-sheet>
      </div>
      <div class="yuanjiao">
        <div class="youhui pub van-hairline--bottom" @click="showYouhui = true">
          <div class="left">优惠</div>
          <div class="center">
            <p class="van-ellipsis"><van-tag plain type="danger">跨店铺满减</van-tag><span>11月04日00:00该商品参加跨店铺满减活动，每满300元，可减40元现金</span></p>
            <p class="van-ellipsis"><van-tag plain type="danger">跨店铺满减</van-tag><span>每满300元，可减40元现金</span></p>
            <p class="van-ellipsis"><van-tag plain type="danger">满减</van-tag><span>每满99元，可减10元现金</span></p>
          </div>
          <div class="right">...</div>
        </div>
        <div class="pub" @click="showBaitiao = true">
          <div class="left">白条</div>
          <div class="center"><p>6期内息费八五折</p></div>
          <div class="right">...</div>
        </div>
      </div>
      <div class="yuanjiao" style="background-color: #fafafa;">
        <div class="pub van-hairline--bottom">
          <div class="left">已选</div>
          <div class="center">
            <p>{{proName}}, {{1}}</p>
            <p class="info">本商品支持保障服务，点击可选服务</p>
          </div>
          <div class="right">...</div>
        </div>
        <div class="pub van-hairline--bottom">
          <div class="left">送至</div>
          <div class="center">
            <p class="van-ellipsis">地址</p>
            <p class="info"><span style="color:red;">现货 </span> 现在至明日17:00前完成下单，预计11月4日20:00前发货，11月6日24:00前送达</p>
          </div>
          <div class="right">...</div>
        </div>
        <div class="baitiao pub van-hairline--bottom">
          <div class="left">运费</div>
          <div class="center">
            <p class="van-ellipsis">免运费</p>
          </div>
        </div>
        <div class="baitiao pub" style="padding-top:0.09rem;padding-bottom:0.09rem;background-color: #fafafa;">
          <ul class="baozhang">
            <li><van-icon name="checked" color="red" />商家发货&售后</li>
            <li><van-icon name="checked" color="red" />7天无理由退货</li>
            <li><van-icon name="checked" color="red" />送运费险</li>
            <li><van-icon name="checked" color="red" />晚必赔</li>
            <li><van-icon name="checked" color="red" />特权保障</li>
            <li><van-icon name="checked" color="red" />货到付款</li>
          </ul>
          <div class="right">...</div>
        </div>
      </div>
      <div class="evalute yuanjiao" style="padding:0.1rem 0.1rem">
        <header>
          <span>评价</span>
          <span>更多</span>
        </header>
        <div class="eva-con">
           <div class="eva-con-header">
             <div class="touxiang">
                <h3>头像</h3>
                <span>名字</span>
             </div>
             <p>时间</p>
           </div>
           <div class="eva-con-con">评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息评价信息</div>
        </div>
        <div class="evalute-more">
          <span>查看更多评价</span>
        </div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" @click="$router.push('/cart')" />
      <van-goods-action-icon :icon="isStar ? 'star' : 'star-o'" :text="isStar ? '已收藏' : '收藏'" :badge="collectNum" @click="addCollectFl" />
      <van-goods-action-button type="warning" text="加入购物车" @click="Cart" />
      <van-goods-action-button type="danger" text="立即购买" @click ="goBuy" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail, addCart, addCollect, deleteCollect, getCollect, getAllCollect, getCartNum } from '../../api/index.js'
import Vue from 'vue'
import $ from 'jquery'
import { Swipe, SwipeItem, Image as VanImage, ImagePreview, GoodsAction, GoodsActionIcon, GoodsActionButton, NavBar, Icon, ShareSheet, CellGroup, Cell, ActionSheet, Tag, Tabs, Tab } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(ShareSheet)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(ActionSheet)
Vue.use(Tag)
Vue.use(Tab)
Vue.use(Tabs)

export default {
  data () {
    return {
      cartNum: 0,
      top: 0,
      isStar: false,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      brand: '',
      column: '',
      discount: 10,
      introduce: '',
      logo: '',
      price: 0,
      proImg: ['https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3922290090,3177876335&fm=26&gp=0.jpg'],
      proName: '',
      sales: 0,
      score: 5,
      stock: 0,
      show: false,
      showFangXin: false,
      showYouhui: false,
      showBaitiao: false,
      collectNum: 0
    }
  },
  props: ['id'],
  mounted () {
    console.log(this.id)
    const that = this
    getCartNum({
      userId: localStorage.getItem('userId')
    }).then(res => {
      if (res.data.data) {
        this.cartNum = res.data.data
      } else {
        this.cartNum = 0
      }
    })
    $('.proCont').scroll(function () {
      that.top = $('.proCont').scrollTop()
      if ($('.proCont').scrollTop() > 0) {
        $('.header').fadeIn()
      } else {
        $('.header').fadeOut()
      }
    })
    document.addEventListener('click', () => {
      this.show = false
    })
    getAllCollect({
      userId: localStorage.getItem('userId')
    }).then(res => {
      if (res.data.state === 200) {
        this.collectNum = res.data.data.length
      }
    })
    getDetail({
      proId: this.id
    }).then(res => {
      console.log(res.data.data)
      this.proImg = [res.data.data[0].proImg, 'https://img.yzcdn.cn/vant/apple-2.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg']
      this.column = res.data.data[0].column
      this.brand = res.data.data[0].brand
      this.discount = res.data.data[0].discount
      this.introduce = res.data.data[0].introduce
      this.price = res.data.data[0].price
      this.proName = res.data.data[0].proName
      this.sales = res.data.data[0].sales
      this.score = res.data.data[0].score
      this.stock = res.data.data[0].stock
    })
    getCollect({
      userId: localStorage.getItem('userId'),
      proId: this.id
    }).then(res => {
      if (res.data.data.length) {
        this.isStar = true
      } else {
        this.isStar = false
      }
    })
  },
  methods: {
    goBuy () {
      this.$router.push('/buy/' + this.id)
    },
    Cart () {
      this.cartNum += 1
      if (localStorage.getItem('isLogin') === 'ok') {
        addCart({
          userId: localStorage.getItem('userId'),
          proId: this.id
        }).then(res => {
          console.log(res.data)
        })
      } else {
        this.$router.push('/login')
      }
    },
    addCollectFl () {
      if (this.isStar) {
        this.isStar = false
        this.collectNum -= 1
        deleteCollect({
          userId: localStorage.getItem('userId'),
          proId: this.id
        }).then(res => {
          console.log(res.data)
        })
      } else {
        this.isStar = true
        this.collectNum += 1
        addCollect({
          userId: localStorage.getItem('userId'),
          proId: this.id
        }).then(res => {
          console.log(res.data)
        })
      }
    },
    onSelect () {
      this.showShare = false
    },
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.show = !this.show
    },
    proview (id) {
      ImagePreview({
        images: this.proImg,
        startPosition: id
      })
    }
  }
}
</script>

<style lang="scss">
  *{
    margin: 0;
    padding: 0;
    border: none;
    }
  .detail{
    display: flex;
    margin-bottom: 0.5rem;
    .baitiao{
      p:nth-child(1){
        margin-top: 8px;
        padding-left: 20px;
      }
      p:nth-child(2){
        margin-top: 3px;
        color: #999;
        padding-left: 20px;
      }
    }
    .info{
      color: #8c8c8c;
      font-size: 12px;
    }
    .baozhang{
      color: #8c8c8c;
      widows: 95%;
      li{
        padding: 3px 12px 3px 0;
        float: left;
        font-size: 12px;
      }
    }
    .evalute{
      header{
        display: flex;
        justify-content: space-between;
        span:nth-child(2){
          color: #999;
        }
        span:nth-child(1){
          font-weight:600;
        }
      }
      .evalute-more{
        text-align: center;
        margin-top: 0.2rem;
        span{
          border:1px solid #ccc;
          padding: 0.05rem;
          border-radius: 0.1rem;
        }
      }
      .eva-con{
        margin-top: 0.2rem;
        .eva-con-header{
          display: flex;
          justify-content: space-between;
          .touxiang{
            display: flex;
            justify-content: space-between;
            color: #262626;
            font-size: 12px;
            h3{
              margin-right: 0.12rem;
            }
          }
          p{
            color: #999;
            font-size: 0.12rem;
          }
        }
      }
    }
    .header1{
      .van-nav-bar{
        position: fixed;
        z-index: 20;
        width: 100%;
        background-color: transparent;
        &::after{
          border: none;
        }
        .van-icon{
          border-radius: 50%;
          background-color: #666666;
        }
      }
      .rightList{
        border:1px solid #ccc;
        position: absolute;
        right:0;
        top:0.3rem;
        width:0.6rem;
        background-color: white;
        z-index: 999;
        li{
          padding:0.05rem 0.05rem;
          border-bottom: 1px solid #ccc;
        }
      }
     }
    .header{
      position: fixed;
      z-index: 1;
      width: 100%;
      display: none;
      .loucen{
        display: flex;
        width: 2rem;
        li{
          flex:1
        }
        .headerActive{
          border-bottom: 2px solid red;
        }
      }
    }
    .proCont{
      background-color: #F2F2F2;
      flex: 1;
      overflow: auto;
      .priceHeader{
        display: flex;
        justify-content: space-between;
        .pdc{
          display: flex;
          .priceDown, .collect{
            display: flex;
            flex-direction: column;
            text-align: center;
            width: 0.4rem;
            font-size: 0.2rem;
            line-height: 11px;
            .priceDownT, .collectT{
              font-size: 0.1rem;
            }
          }
        }
      }
      .proIntro{
        font-weight: 700;
        line-height: 21px;
        font-size: 16px;
        color: #262626;
        p:last-child{
          padding: 18px 0 0;
          line-height: 1.3;
          position: relative;
          font-size: 12px;
          max-height: 46px;
          overflow: hidden;
        }
      }
      .fangXin{
        position: relative;
        height: 13px;
        line-height: 1;
        background: #fbf0fd;
        padding: 12px 48px 12px 10px;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .fangXinL{
          display: flex;
          i{
            display: block;
            width: 0.7rem;
            height: 0.13rem;
            background-repeat: no-repeat;
            background-position: 0 0;
            vertical-align: middle;
            background-size: contain;
            margin-right: 0.04rem;
            background-image: url();
          }
        }
        .fangXinR{
          line-height: 0.13rem;
        }
      }
      .fangXinCon{
        overflow: hidden;
        padding: 0 18px;
        h3{
          font-size: 14px;
          color: #e2231a;
          line-height: 21px;
        }
        p{
          margin-top: 3px;
          font-size: 12px;
          color: #666;
          letter-spacing: 0;
          line-height: 18px;
        }
      }
      .van-action-sheet__header{
        height: 0.46rem;
        line-height: 0.46rem;
        font-size: 0.16rem;
        color: #333;
        font-weight: 600;
      }
      .van-action-sheet__cancel{
        font-size: 0.13rem;
        font-weight: 700;
        height: 0.38rem;
        line-height: 0.38rem;
        border-radius: 0.21rem;
        color: #fff;
        background-color: #f24d0c;
        padding: 0;
      }
      .yuanjiao{
        border-radius: 0.1rem;
        margin-top: 0.12rem;
        padding: 0rem 0rem 0.05rem;
        background-color: #fff;
      }
      .pub{
        display: flex;
        font-size: 0.13rem;
        padding: 0.18rem 0.18rem 0rem;
        background-color: #fff;
        .left{
          width: 15%;
          font-weight: 600;
        }
        .center{
          width: 80%;
          p{
            margin-bottom: 0.12rem;
          }
        }
        .right{
          width: 5%;
        }
      }
    }
  }
</style>
